<template>
  <s-layout :mainBackground="'#FBF3E1'" class="chat-wrap" color="#000000" title="节日详情" navbar="inner"
            :is_main-body="true"
            :customBody="customBody()" :is_mainBody="false" :bg-style="{color:'#FBF3E1'}"
            :is_back="true" backgroundColor="#FBF3E1">
    <view class="wh_750 flex-sub flex flex-column align-center">
      <view class="fs_36 fw_500 wh_710 ss-m-t-44">
        {{state.data.title}}
      </view>
      <view class="wh_710 ss-m-t-16 fs_24" style="color: #999999;">
        {{state.data.catename}} | 发布时间: {{ dayjs(state.data.add_time * 1000).format('YYYY-MM-DD')}}
      </view>
      <view class="hW_40"></view>
      <view class="wh_710">
        <mp-html :content="state.data.content.content"></mp-html>
      </view>
      <view class="hW_50"></view>
    </view>
  </s-layout>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import { reactive } from 'vue';
  import dayjs from 'dayjs';
  import MpHtml from '@/uni_modules/mp-html/components/mp-html/mp-html.vue';

  const customBody = () => {
    return {
      'display': 'flex',
      'flex-direction': 'column',
      'align-items': 'center',
    };
  };

  const state = reactive({
    data: {}
  })

  onLoad(async (options) => {
    const { data } = await sheep.$api.surname.getSurnameDetail({
      id: options.id
    })
    state.data = data
  });
</script>

<style lang="scss">

</style>
